<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/login_styles.css" />
        <script src="js/lib/jquery-1.8.0.min.js"></script>
        <script src="js/lib/jquery-ui-1.8.23.custom.min.js"></script>
        <script type="text/javascript">
            /* submit form for processing */
            submitForm = function() {
                event.preventDefault();
                var state = true;
                
                // get all input fields and classes
                $("input").each( function( index, ele ) {
                    if ($("#"+ele.id).hasClass('errorField')) {
                        $("#"+ele.id).removeClass('errorField');
                    }
                    state = formValidate('empty', ele.id);
                });
                
                // submit to back end
                if (state == true) {
                    var url = 'api.php?function=login&action=validate&ajax=true';
                    var account = $("#account").val();
                    var username = $("#username").val();
                    var password = $("#password").val();
                    
                    $.post(url, { 
                    	'account': account, 
                    	'username': username, 
                    	'password': password
                    	}, function(result){
                    		console.log(result);
                    	});
                }
            }
            
            /* validate form fields */
            formValidate = function(type, field) {
                if (type == 'empty') {
                    if ($("#"+field).val().length < 1) {
                        flash(field, field + ' Field cannot be empty<br />')
                        return false;
                    } else {
                        return true;
                    }
                }
                
                if (type == 'numerical') {
                    // @TODO write regular expression match
                }
                
                if (type == 'length') {
                    // @TODO verify passwords are at least x long
                }
            }
            
            /* flash fail message*/
           flash = function(field, msg) {
               $("#"+field).empty();
                $("#"+field).addClass('errorField'); // add error indication to field
                $("#flash").show();
                $("#flash").append(msg).delay(5000).fadeOut();
           }
           
           
        </script>
    </head>
    <body>
        <!-- consider ajax for submitting user login / authentication at some point -->
        <div id="content">
            <div id="flash"></div>
            <div id="loginform">
                <form id="login" action="" method="POST">
                    <div class="fieldrow">
                        <label for="account">Account Number: </label>
                        <input type="text" name="account" id="account" class="empty" />
                    </div>
                    <div class="fieldrow">
                        <label for="username">Username: </label>
                        <input type="text" name="username" id="username" class="empty" />
                    </div>
                    <div class="fieldrow">
                        <label for="password">Password: </label>
                        <input type="password" name="password" id="password" class="empty" />
                    </div>
                    <button id="loginUser" onClick="submitForm();">Log In</button>
                </form>
            </div>
        </div>
    </body>
</html>